<template>
  <div>
    <Form :model="searchFrom" :label-width="80">
      <Card style="margin-bottom: 10px;">
        &nbsp;
        <!-- <Select v-model="searchFrom.teamLevel" style="width:200px">
          <Option v-for="item in teamLevelList" :value="item.index" :key="item.index">{{ item.name }}</Option>
        </Select> -->
        <Input placeholder="层级" v-model="searchFrom.teamLevel" style="width:120px"></Input>
        &nbsp;
        <Input placeholder="用户名或手机号码" v-model="searchFrom.mobileLike" style="width:200px"></Input>
        &nbsp;
        <Input placeholder="邀请人" v-model="searchFrom.ymidLike" style="width:200px"></Input>
        &nbsp;&nbsp;<Button type="primary" @click="getData(1)" icon="ios-search">{{$t('button.search')}}</Button>
      </Card>
    </Form>

    <Table border :data="tableData" :columns="tableColumns" stripe ref="selection" @on-selection-change="handleSelectRow()" />
    <div style="margin:10px 0px;text-align: center;">
      <Page :total="dataCount" :current="searchFrom.page" @on-change="changePage"></Page>
    </div>

  </div>
</template>

<script>
  import {
    teamList
  } from "@/api/manager/userInfo";
  import {
    formatDate
  } from "@/libs/tools";
  import {
    mapGetters
  } from "vuex";

  export default {
    name: 'team',
    props: {
      userId: {
        type: Number,
        default: null
      }
    },
    watch: {
      userId: function(value) {
        console.info("===value:" + value)
        if (value) {
          this.searchFrom["userId"] = value;
          this.getData();
        }
      }
    },
    components: {},
    data() {
      return {
        userId: this.userId,
        dataCount: 0,
        tableData: [],
        formModal: false,
        modalTitle: "",
        entity: {
          orderValue: 0
        },
        pks: [],
        searchFrom: {
          page: 1,
          teamLevel: '',
          userId: "",
          mobileLike: '',
          ymidLike: '',
        },
        addUserId: 0,
        loading: true,
        teamLevelList: [{
          "name": "一级团队",
          "index": "1"
        }, {
          "name": "二级团队",
          "index": "2"
        }],
        userTypeList: []
      };
    },
    mounted: function() {
      console.info("===mounted===" + this.userId)
      this.getData();
    },
    computed: {
      tableColumns() {
        let that = this;
        return [{
            type: "selection",
            width: 60,
            align: "center"
          },
          {
            title: '用户名称',
            align: "center",
            width: 120,
            key: "map.userName",
            render: (h, params) => {
              let userName = h("div", {}, params.row.map.userName);
              let userLevelName = h("div", {}, '(' + that.getUserLevelName(params.row.map.userLevel) + ')');
              return h("div", [userName, userLevelName]);
            }
          },
          {
            title: '邀请人',
            width: 120,
            align: "center",
            key: "map.ymid",
            render: (h, params) => {
              return h("div", params.row.map.ymid);
            }
          },
          // {
          //   title: '用户类型',
          //   width: 130,
          //   align: "center",
          //   key: "userType",
          //   render: (h, params) => {
          //     return h("div", that.getUserTypeName(params.row.userType));
          //   }
          // },
          // {
          //   title: "用户等级",
          //   width: 120,
          //   align: "center",
          //   key: "map.userLevel",
          //   render: (h, params) => {
          //     console.info(params.row.map.userLevel);
          //     return h("div", that.getUserLevelName(params.row.map.userLevel));
          //   }
          // },
          {
            title: "层级",
            width: 80,
            align: "center",
            key: "userParLevle",
          },
          {
            title: this.$t("userInfoManager.mobile"),
            align: "center",
            width: 150,
            key: "map.mobile",
            render: (h, params) => {
              return h("div", params.row.map.mobile);
            }
          },
          // {
          // 	title: "GHMI总额111",
          // 	align: "center",
          //   render: (h, params) => {
          //   	return h("div", that.getGhmiTotal(params.row));
          //   }
          // },
          {
            title: "USDT",
            width: 100,
            align: "center",
            key: "map.biUsdt",
            render: (h, params) => {
              return h("div", params.row.map.biUsdt);
            }
          },
          {
            title: "GHMI",
            width: 100,
            align: "center",
            key: "map.biDianzi",
            render: (h, params) => {
              return h("div", params.row.map.biDianzi);
            }
          },
          {
            title: "GUSD",
            width: 100,
            align: "center",
            key: "map.gusd",
            render: (h, params) => {
              return h("div", params.row.map.gusd);
            }
          },
          {
            title: "业绩量",
            width: 100,
            align: "center",
            key: "map.leijiMoneyUser",
            render: (h, params) => {
              return h("div", params.row.map.leijiMoneyUser);
            }
          },
          {
            title: "矿源",
            width: 100,
            align: "center",
            key: "map.orderMoneySum",
            render: (h, params) => {
              return h("div", params.row.map.orderMoneySum);
            }
          },
          {
            title: this.$t("userInfoManager.addDate"),
            // width: 150,
            align: "center",
            key: "addDate",
            render: (h, params) => {
              return h(
                "div",
                formatDate(new Date(params.row.addDate), "yyyy-MM-dd hh:mm:ss")
              );
            }
          },
        ];
      }
    },
    methods: {
      getUserTypeName(val) {
        let showName = "";
        for (let i = 0; i < this.userTypeList.length; i++) {
          if (this.userTypeList[i].index == val) {
            showName = this.userTypeList[i].showName;
            break;
          }
        }
        return showName;
      },
      getUserLevelName(val) {
        let showName = "";
        if (val == 200) {
          showName = "合格会员";
        } else if (val == 201) {
          showName = "G1";
        } else if (val == 202) {
          showName = "G2";
        } else if (val == 203) {
          showName = "G3";
        } else if (val == 204) {
          showName = "G4";
        }
        return showName;
      },
      getData(page) {
        if (page) {
          this.searchFrom.page = page;
        }
        this.searchFrom.userId = this.userId
        teamList(this.searchFrom)
          .then(response => {
            const data = response.data;
            this.dataCount = data.data.dataCount;
            this.tableData = data.data.entityList;
            this.userTypeList = data.data.userTypeList;
          })
          .catch(error => {});
      },
      getGhmiTotal(val) {
        let ghmiTotal = val.map.ghmiTotal;
        return ghmiTotal;
      },
      handleSelectRow(selection) {
        this.pks = [];
        let list = this.$refs.selection.getSelection();
        let that = this;
        list.forEach(function(value, index, array) {
          that.pks.push(value.id);
        });
      },
      changePage(page) {
        console.info("===changePage==")
        this.searchFrom.page = page;
        this.getData();
      },
    }
  };
</script>

<style>
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
</style>
